<template>
  <div class="quill-wrap">
    <quill-editor
      v-model="value"
      @change="handleChange"
      @click.native="handleClick"
      :options="editorOption"
      ref="myQuillEditor" />
  </div>
</template>
<script>
  import {quillRedefine} from 'vue-quill-editor-upload'//引入图片上传
  export default {
    name: "ueditor",
    props: {
      value: {
        default: ''
      },
      uploadPath:{
        default:'/api/app/upload/imgsUeditor'
      },

    },
    data() {
      return {
        text: undefined,
        uploadUrl: "",//文件上传接口
        editorOption: {},
      }
    },
    watch: {
      value () {
        this.text = this.value;
      }
    },
    methods:{
      init () {
        this.text = this.value;
        this.uploadUrl=this.uploadPath;
      },
      handleClick () {
        if (typeof this.click === 'function') this.click({ value: this.text, column: this.column });
      },
      handleChange (value) {
        if (typeof this.change === 'function') this.change({ value: value.html, column: this.column });
        this.$emit('input', value.html);
        this.$emit('change', value.html);
      }
    },

    created() {
       this.init();
      this.editorOption = quillRedefine(//修改富文本编辑器图片上传路径
        {
          // 图片上传的设置
          uploadConfig: {
            action: this.uploadUrl,  // 必填参数 图片上传地址
            res: (respnse) => {
            console.log(respnse.data.url)
          return respnse.data.url;//return图片url
    },
      name: 'img'  // 图片上传参数名
    }
    })
    }
  }
</script>
